<!DOCTYPE html>
<html style="font-size: 192px;">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>UI-Demo</title>
  <style>
      html, body {
          width: 100vw;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.85);
          overflow: hidden;
          padding: 0;
          margin: 0;
      }
  </style>
  <link rel="stylesheet" href="./UI-Demo_files/css/index.css">
  <script>
    var w = document.documentElement.clientWidth / 10;
    document.getElementsByTagName('html')[0].style['font-size'] = w + 'px';
  </script>
</head>
<body fe-role="Widget">
  <p class="title">YunOS for TV UI-Demo</p>
  <div id="main" fe-role="Scroll">
    <div id="main-list" class="scroll-list"></div>
  </div>
  <script src="./UI-Demo_files/blitz_common.min.js"></script>
  <script type="text/javascript" src="./UI-Demo_files/FocusEngine.js" charset="utf-8"></script>
  <script src="./UI-Demo_files/TVUtil.min.js"></script>
  <script>
    var indexList = [
      {name: "电视淘宝", link: "./Demo12-TVTaobao/index.html", icon: "./UI-Demo_files/res/icon_1.png"},
      {name: "分页请求", link: "./Demo11-PagingRequest.html", icon: "./UI-Demo_files/res/icon_2.png"},
      {name: "双向列表", link: "./Demo9-GridView/index.html", icon: "./UI-Demo_files/res/icon_9.png"},
      {name: "重绘", link: "./Demo10-Rerender.html", icon: "./UI-Demo_files/res/icon_10.png"},
      {name: "入门", link: "./Demo3-ATVFocus.html", icon: "./UI-Demo_files/res/icon_3.png"},
      {name: "事件", link: "./Demo4-Event.html", icon: "./UI-Demo_files/res/icon_4.png"},
      {name: "Loading", link: "./Demo5-Loading.html", icon: "./UI-Demo_files/res/icon_5.png"},
      {name: "纵向列表", link: "./Demo6-VerticalList.html", icon: "./UI-Demo_files/res/icon_6.png"},
      {name: "多行纵向列表", link: "./Demo7-VerticalList2.html", icon: "./UI-Demo_files/res/icon_7.png"},
      {name: "横向列表", link: "./Demo8-HorizontalList.html", icon: "./UI-Demo_files/res/icon_8.png"},
      {name: "Progress", link: "./Demo14-progress.html", icon: "./UI-Demo_files/res/icon_5.png"},
      {name: "Dialog", link: "./Demo15-dialog.html", icon: "./UI-Demo_files/res/icon_6.png"},
      {name: "HighLight", link: "./Demo16-grid_highlight.html", icon: "./UI-Demo_files/res/icon_7.png"},
    ];
    var mainList = document.getElementById('main-list');
    var main = document.getElementById('main');

    // 动态增加元素
    function addItems(list) {
      var _html = "";
      for (var i = 0; i < list.length; i++) {
        var item = list[i];
        _html += "<div fe-role=\"Widget\" class=\"scroll-item\" data-href=" + item.link + "> " +
          "<img  src=" + item.icon + "> " +
          "<p  class=appName> " + item.name + "</p>" +
          "</div>";
      }
      mainList.innerHTML += _html;
    }

    addItems(indexList);

    var root = FocusEngine.render(main);
    var _focus = new TVUtil.Highlight({
        root: root,
        styles: {
          border: 'solid 1px #ffffff'
        }
      });

    root.on("okdown", function (e) {
      var _url = e.target.con.getAttribute("data-href");
      var _webcore = blitz.checkWebcore();
      if (_webcore === "webkit") {
        location.href = _url;
      } else {
        var base = blitz.load("base");
        base.startPage(_url);
      }
    });

  </script>
</body>
</html>
